<template>
<!--  这个一定要记住-->
  <div class="search-suggestion">
        <van-cell
        v-for="(text, index) in s"
        :key="index"
      
        @click="$emit('search', text)"  
        icon="search">
        <span slot="title" v-html="highlight(text)"></span>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestions } from '@/api/search'
// 按需加载有好处：只会把使用到的成员打包到结果中
import { debounce } from 'lodash'
export default {
  name: 'SearchSuggestion',
  components: {},
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      s:[],
      //  htmlStr: 'Hello <span style="color: red">World</span>'
    }
  },
  computed: {},
  // 深度监听
  watch: {
    //只要searchText发生变化，我们都需要发起请求，显示最新的联想建议（联想建议会随着输入的内容变化而变化），
    // 所以我们需要监听searchText的变化，那么就需要使用watch
    searchText: {
      // 当 searchText 发生改变的时候就会调用 handler 函数
      // 注意：handler 函数名称是固定的
      // handler (val) {
      //    this.loadSearch(val)
      // },
      handler:debounce(function (val){
        this.loadSearch(val)
      },400),

      
      // 首次监视触发（如果不添加这个属性，那么handler无法监听到第一次searchText的变化）
      immediate: true  //immediate立即的意思
    }

  },
  created () {},
  mounted () {
 
  },
  methods: {
       async loadSearch(q){
      try {
        const { data } = await getSearchSuggestions(q)
        this.s = data.data.options
        // 这样输入js就不会报错了，因为刚开始network里面的存入的是null
        if(this.s[0]==null){
          this.s=[]
        }
      } catch {
        console.log(err);
        this.$toast('获取失败')
      }

    },
       highlight (text) {
      const highlightStr = `<span class="active">${this.searchText}</span>`
      // 正则表达式 // 中间的内容都会当作匹配字符来使用，而不是数据变量
      // 如果需要根据数据变量动态的创建正则表达式，则手动 new RegExp
      // RegExp 正则表达式构造函数
      //    参数1：匹配模式字符串，它会根据这个字符串创建正则对象
      //    参数2：匹配模式，要写到字符串中
      const reg = new RegExp(this.searchText, 'gi')
      // /this.searchText/gi不对，会当字符串
      // text.replace(, highlightStr)
      return text.replace(reg, highlightStr)
    }
  }
}
</script>

<style scoped lang="less">
.search-suggestion {
  /deep/ span.active {
    color: #3296fa;
  }
}
</style>